<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="/templates/admin_template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:define name="title">
        Chocolor-Admin:Articles
    </ui:define>

	<ui:define name="content">
		<h:form id="form">



			<c:if
				test="#{!(adminArticleBean.mode == 'add' || adminArticleBean.mode == 'edit')}">
				<p:commandButton value="Add user" ajax="false"
					action="#{adminArticleBean.initAddArticle()}" id="showAddArticleForm" />
			</c:if>

			<p:outputPanel id="addArticlePanel">
				<c:if
					test="#{adminArticleBean.mode == 'add' || adminArticleBean.mode == 'edit'}">
					<h:form id="addArticle">

						<p:messages id="msgs" autoUpdate="true" showDetail="true"/>
						<p:panelGrid
							style="margin-top:20px; width:100%; border-style:hidden"
							id="addArticleForm">
							<f:facet name="header">
								<p:row>
									<p:column style="border-style:hidden" colspan="2">Add user form</p:column>
								</p:row>
							</f:facet>

							<p:row>
								<p:column style="width:200px; border-style:hidden">Email:</p:column>
								<p:column style="border-style:hidden">
									<p:inputText required="true"
										value="#{adminArticleBean.client.identification.email}" />
								</p:column>
							</p:row>

							<p:row>
								<p:column style="width:200px; border-style:hidden">Name:</p:column>
								<p:column style="border-style:hidden">
									<p:inputText required="true"
										value="#{adminArticleBean.client.name}" />
								</p:column>
							</p:row>

							<p:row>
								<p:column style="border-style:hidden">
									<h:outputLabel for="pwd1" value="Enter password: *" />
								</p:column>
								<p:column style="border-style:hidden">
									<p:password id="pwd1"
										value="#{adminArticleBean.client.identification.passwordHash}"
										match="pwd2" label="Password 1" required="true"
										feedback="true" inline="true" />
								</p:column>
							</p:row>

							<p:row>
								<p:column style="border-style:hidden">
									<h:outputLabel for="pwd2" value="Reenter password: *" />
								</p:column>
								<p:column style="border-style:hidden">
									<p:password id="pwd2"
										value="#{adminArticleBean.client.identification.passwordHash}"
										label="Password 2" required="true" />
								</p:column>
							</p:row>

							<p:row>
								<p:column style="width:200px; border-style:hidden">Telephone:</p:column>
								<p:column style="border-style:hidden">
									<p:inputText value="#{adminArticleBean.client.telephone}"
										required="true" />
								</p:column>
							</p:row>

							<p:row>
								<p:column style="width:200px; border-style:hidden">Select role:</p:column>
								<p:column style="border-style:hidden">
									<p:selectOneMenu
										value="#{adminArticleBean.client.identification.role}"
										id="Quantity" effect="fade" required="true">
										<f:selectItem itemLabel="None" itemValue="" />
										<f:selectItems value="#{adminArticleBean.roles}" />
									</p:selectOneMenu>
								</p:column>
							</p:row>




							<f:facet name="footer">
								<p:row>
									<p:column style="text-align:left; border-style:hidden"
										colspan="2">
										<c:if test="#{adminArticleBean.mode == 'add'}">
											<p:commandButton value="Add" id="addArticle"
												action="#{adminArticleBean.addArticle()}" ajax="false"
												icon="ui-icon-check" />
										</c:if>
										<c:if test="#{adminArticleBean.mode == 'edit'}">
											<p:commandButton value="Save" id="editArticle" ajax="false"
												action="#{adminArticleBean.editArticle()}" icon="ui-icon-check" />
										</c:if>
										<p:commandButton value="Cancel" id="cancel" ajax="false"
										action="#{adminArticleBean.setMode(null)}" immediate="true"/>
									</p:column>
								</p:row>

							</f:facet>

						</p:panelGrid>
					</h:form>
				</c:if>
			</p:outputPanel>
		</h:form>



		<p:dataTable id="table" var="client" value="#{adminArticleBean.clients}"
			paginator="false" rows="10" widgetVar="clientsTable">
			<f:facet name="header">
				<p:row>
					<p:column style="border-style:hidden" colspan="2">Clients</p:column>
				</p:row>
				<!-- <div style="text-align: right">
						<p:outputPanel>
							<h:outputText value="Search all fields:" />
							<p:inputText id="globalFilter"
								onkeyup="clientsTable.filter()" style="width:150px" />
						</p:outputPanel>
					</div> -->
			</f:facet>

			<p:column style="width:10%">
				<f:facet name="header">
					<h:outputText value="Client Id:" />
				</f:facet>
				<h:outputText value="#{client.clientId}" />
			</p:column>

			<p:column style="width:30%">
				<f:facet name="header">
					<h:outputText value="Client name" />
				</f:facet>
				<h:outputText value="#{client.name}" />
			</p:column>

			<p:column style="width:20%">
				<f:facet name="header">
					<h:outputText value="Article" />
				</f:facet>
				<h:outputText value="#{client.telephone}" />
			</p:column>

			<p:column>
				<h:form>
					<p:commandButton ajax="false"
						action="#{adminArticleBean.initEditArticle(client.clientId)}"
						icon="ui-icon-pencil" />
				</h:form>
			</p:column>
		</p:dataTable>


	</ui:define>
</ui:composition>
